<template>
	<view>
		<view class="billCard" v-for="(item, index) in orderList" :key="index">
			<!-- <view class="" @click="startOrder">
			开单
		</view> -->
			<view class="top">
				<view class="name flexjsbac">
					<view class="flexJcac">
						<view class="status flexJcac" v-if="item.needChange">调</view>
						<text class="time">{{ item.storeString }}</text>
					</view>
					<text class="status-time">{{ item.countDown }}</text>
					<!-- <text class="status-time"
						v-if="(tabActive===1)&&item.timePoint">距离{{ tabActive===1?'上':'下' }}钟还有{{ item.timePoint }}分钟</text> -->
					<!-- <text class="status-time"
						v-if="(tabActive===1||tabActive===2)&&item.timeOverPoint">已超时{{item.timeOverPoint}}分钟</text> -->
				</view>
				<view class="">
					<text>订单号:{{ item.orderId }}</text>
				</view>
			</view>
			<view class="bottom" @click='detail(item)'>
				<view class="title ">
					<view class="flexjsbac">
						<text>{{ item.itemName }}</text>
						<text v-if="item.paymentMoney">
							<text class="money"> +{{ item.royalties }}</text>元
						</text>
					</view>
					<view class=""></view>
				</view>
				<!-- <view class="flex">
				<text style="margin-right: 10rpx;">数量：{{ '无' }}</text>
					<text style="margin-right: 10rpx;">技师名称：{{ '无' }}</text>
				</view> -->
				<view class="">
					<text style="margin-right: 10rpx;">客户名称：{{ item.userName }}</text>
				</view>
				<view class="" @click.stop="callPhone(item.userPhoneNumber)">
					<text style="margin-right: 10rpx;">
						手机号：{{ item.userPhoneNumber }}
						<uni-icons type="phone-filled" size="20" color="#19de6b"></uni-icons>
					</text>
				</view>
				<view class="">
					<text style="margin-right: 10rpx;">附加商品名称：
						<span v-for="item in item.products">{{item}}</span>
					</text>
				</view>
				<view class="">
					<text style="margin-right: 10rpx;">包间号：{{ item.compartmentName }}</text>
				</view>
				<view class="">
					<text>预约开始时间:{{ item.subscribeStartTime }}</text>
				</view>
				<view class="">
					<text>预约结束时间:{{ item.subscribeEndTime }}</text>
				</view>
				<view class="">
					<text>服务开始时间:{{ item.serviceStartTime }}</text>
				</view>
				<view class="">
					<text>服务结束时间:{{ item.serviceEndTime }}</text>
				</view>
				<view class="">
					<text>支付时间:{{ item.paymentTime ? item.paymentTime : '未支付' }}</text>
				</view>
			</view>
			<view class="bottom" v-if="item.otherGoods">
				<view class="title flexjsbac">
					<text>{{ item.otherGoods }}</text>
				</view>
				<!-- <view class="">
				<text style="margin-right: 10rpx;">{{ item.persong }}</text>
				<text>{{ orderList.phone }}</text>
			</view> -->
				<view class="">
					<text>数量:{{ item.goodsNum }}次</text>
				</view>
			</view>
			<view class="bottom_btn flex">
				<view class="btn" @click="payMoney(item)" v-if="tabActive === 1">
					{{item.payStatus==2?'退单':'支付'}}
				</view>
				<view class="btn" @click="clickBottom(item)" v-if="bottomName[tabActive]">
					{{ bottomName[tabActive] }}
				</view>
			</view>

		</view>

		<you-popup :popupVisible="shopVisible" :popupTitle="tabActive === 1 ? '上钟' : '提前下钟'"
			@popupClose="shopVisible = false" bgColor="#fff" dialogWidth="650rpx">
			<view slot="popupContent">
				<!-- 标题 -->
				<view class="popup-contain">
					确定给{{ itemData.userPhoneNumber }}的客户{{ tabActive === 1 ? '上' : '下' }}钟吗
				</view>
			</view>
			<view slot="btnBox" class="popup-submit flexJcac">
				<view class="btn btnwh" style="background-color: #C27E15;color:#fff;" @click="confirm(itemData)">确定
				</view>
				<view class="btn btnwh" @click="shopVisible = false">取消</view>
			</view>
		</you-popup>
		<you-popup :popupVisible="refundVisible" :popupTitle="refundTitle" @popupClose="refundVisible = false"
			bgColor="#fff" dialogWidth="650rpx" dialogHeight="500rpx">
			<view slot="popupContent">
				<!-- 标题 -->
				<view class="popup-contain">
					<div class="flex" style="align-items: center;">
						<span style="width: 120rpx;">理 由:</span><input type="text"
							style="height: 74rpx;border:1px solid #333;border-radius: 10px;margin-left: 15px;width:70%"
							placeholder-style="fontSize:27rpx;color:#666666" v-model="refundData.remark"
							placeholder="请输入理由">
					</div>
					<div class="flex" style="align-items: center;margin-top: 10px;">
						<span style="width: 120rpx;">退款比例:</span><input type="text"
							style="height: 74rpx;border:1px solid #333;border-radius: 10px;margin-left: 15px;width:70%"
							placeholder-style="fontSize:27rpx;color:#666666" v-model="refundData.beChargebackRatio"
							placeholder="请输入退款比例">
					</div>

				</view>
			</view>
			<view slot="btnBox" class="popup-submit flexJcac">
				<view class="btn btnwh" style="background-color: #C27E15;color:#fff;"
					@click="refundconfirm(refundData)">确定
				</view>
				<view class="btn btnwh" @click="refundVisible = false">取消</view>
			</view>
		</you-popup>
		<u-toast ref="uToast"></u-toast>
		<you-popup :popupVisible="payInfoDialog" :showTitle="false" :showBtn="false" @popupClose="payInfoDialog = false"
			dialogHeight='850rpx'>
			<template #popupContent>
				<view class="pay-info-box">
					<view class="pay-info-item" v-for="(item, index) in payInfoConfig" :key="index">
						<view :class="['item-label', item.select ? 'item-select-label' : '']">{{ item.label }}：</view>
						<view class="item-select" v-if="item.select">
							<uni-data-select class="select" v-model="payInfoData[item.key]"
								:localdata="payInfoOptions[item.key]"
								@change="selectChange($event, item)"></uni-data-select>
						</view>
						<view class="item-value" v-else>
							{{ item.money ? feeKeys(item.key) || '--' : payInfoData[item.key] }}{{ item.suffix }}
						</view>
					</view>
					<view class="input-box" v-if="payInfoData.paymentType === '8'">
						<uni-easyinput v-model="payInfoData.groupPurchaseId" placeholder="请输入券码"></uni-easyinput>
						<uni-easyinput v-model="payInfoData.groupPurchaseMoney" placeholder="请输入实收金额"></uni-easyinput>
					</view>
					<view class="pay-btn" @click="clickSubmitPay">确认</view>
				</view>
			</template>
		</you-popup>
	</view>
</template>

<script>
	import YouPopup from '@/components/you-popup/index.vue'
	import {
		upClock,
		chargebackMoneyPC
	} from "@/api/system/home"
	import {
		fetchCouponDiscount,
		toPaymentOrderItemPC,
		toGetPayOrderItemMoney,
		payOrderItemPC
	} from '@/api/order'
	export default {
		components: {
			YouPopup
		},
		props: {
			orderList: {
				type: Array,
				default: []
			},
			// bottomName:{
			// 	type:String,
			// 	default:'提前上钟'
			// },
			tabActive: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				shopVisible: false,
				refundVisible: false,
				refundTitle: '',
				refundData: {
					beChargebackRatio: '',
					remark: ''
				},
				bottomName: {
					1: '上钟',
					2: '下钟',
					// 3: '提醒评价',
					4: '评价详情',
					5: '退单详情'
				},
				itemData: {},
				payInfoDialog: false,
				payInfoConfig: [{
						label: '客户手机号',
						key: 'phoneNumber'
					},
					{
						label: '客户姓名',
						key: 'userName'
					},
					{
						label: '余额',
						key: 'valueMoney',
						suffix: '元'
					},
					{
						label: '会员权益',
						key: 'memberFlag'
					},
					{
						label: '订单金额',
						key: 'orderAmount',
						suffix: '元'
					},
					{
						label: '优惠方式',
						key: 'discountType',
						select: true
					},
					{
						label: '优惠券',
						key: 'itemZyUserCouponId',
						select: true
					},
					{
						label: '优惠金额',
						key: 'discountsMoney',
						money: true,
						suffix: '元'
					},
					{
						label: '实付金额',
						key: 'actuallyMoney',
						money: true,
						suffix: '元'
					},
					{
						label: '支付方式',
						key: 'paymentType',
						select: true
					}
				],
				payInfoOptions: {
					discountType: [{
							text: '会员权益',
							value: 'member'
						},
						{
							text: '储值卡',
							value: 'storeCard'
						},
					],
					itemZyUserCouponId: [],
					paymentType: [
						// { text: '微信', value: '1' },
						// { text: '支付宝', value: '2' },
						{
							text: '现金',
							value: '3'
						},
						// { text: '银行卡', value: '4' },
						{
							text: '余额',
							value: '5'
						},
						// { text: '其他', value: '6' },
						{
							text: '扫码支付',
							value: '7'
						},
						{
							text: '团购券',
							value: '8'
						}
					]
				},
				payInfoData: {},
				toPaymentOrderItemPC: {}, //返回参数
				chooseCoupon: null,
				totalMoney: 0,
				couponDiscount: 0,
				orderParams: {} //点击订单参数
			}
		},
		computed: {
			// allProjectMoney() { // 项目金额
			// 	return this.nowProjectMoney
			// },
			// allGoodsMoney() { // 附加商品金额
			// 	return this.nowGoodsMoney
			// },
			// totalMoney() { // 订单总金额
			// 	// console.log(this.allProjectMoney, 'this.allProjectMoney');
			// 	// console.log(this.allGoodsMoney, 'this.allGoodsMoney');
			// 	// console.log(this.roomMoney, 'this.roomMoney');
			// 	const projectAccount = this.$methods.numberAdd(this.allProjectMoney, this.allGoodsMoney)
			// 	return this.$methods.numberAdd(projectAccount, this.roomMoney)
			// },

			discountsMoney() { // 优惠金额
				return this.couponDiscount
			},
			actuallyMoney() { // 实付金额
				return this.$methods.numberSub(this.totalMoney, this.discountsMoney)
			}
		},
		methods: {
			feeKeys(value) {
				return this[value]
			},
			//打电话
			callPhone(number) {
				uni.makePhoneCall({
					phoneNumber: number, // 替换为您要拨打的电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(err) {
						console.error('拨打电话失败：' + JSON.stringify(err));
					}
				});
			},
			clickBottom(item) {
				if (this.tabActive === 1 || this.tabActive === 2) {
					this.confirm(item)
					// this.shopVisible = true
					// this.itemData = item
				} else {
					this.detail(item)
				}
				// if (this.tabActive == 6) {
				// 	this.detail()
				// } else {
				// 	if(this.tabActive ===1 || this.tabActive===2) {
				// 		this.shopVisible = true
				// 	}
				// }
			},
			//点击支付或退单
			payMoney(item) {
				this.orderParams = item
				this.refundTitle = item.payStatus == 2 ? '退单' : '支付'
				if (this.refundTitle == '退单') {
					this.refundVisible = true
					this.refundData = {
						itemId: item.id,
						beChargebackRatio: '',
						remark: ''
					}
				} else {
					const params = {
						"itemId": item.id,
						"storeId": uni.getStorageSync('technician').belongStoreId,
						"userPhoneNumber": item.userPhoneNumber,
						"orderId": item.orderId
					}
					toPaymentOrderItemPC(params).then(res => {
						this.toPaymentOrderItemPC = res.data
						this.payInfoDialog = true
						this.payInfoData = {
							phoneNumber: res.data.userPhoneNumber,
							userName: item.userName,
							discountsMoney: res.data.discountsMoney,
							memberFlag: res.data.isMember,
							actuallyMoney: res.data.actuaryMoney,
							orderAmount: res.data.paymentMoney,
							valueMoney: res.data.valueCardMoney,
						}
					})
				}
			},
			//确认退单
			refundconfirm(data) {
				// console.log(1111);
				// console.log(this.refundData,'this.refundData');
				if (!this.refundData.beChargebackRatio) {
					this.$modal.msgError("请输入退款比例")
					return
				}
				chargebackMoneyPC(this.refundData).then(res => {
					if (res.code == 200) {
						this.refundVisible = false
						this.$emit('confirm');
					}
				})
			},
			//支付
			selectChange(value, item) {
				if (item.key === 'itemZyUserCouponId') {
					this.chooseCoupon = value
					this.getDiscount(value)
				}
				if (item.key === 'discountType') {
					this.getDiscount(this.chooseCoupon)
					if (value == 'member') {
						this.payInfoOptions.paymentType = [{
								text: '现金',
								value: '3'
							},
							{
								text: '扫码支付',
								value: '7'
							},
							{
								text: '团购券',
								value: '8'
							}
						]
					} else {
						this.payInfoOptions.paymentType = [{
							text: '余额',
							value: '5'
						}]
					}
				}
			},
			// 获取会员和储值折扣价
			getDiscount(value) {
				const zyOrderProductList = []
				const zyOrderItemList = [{
					itemId: this.toPaymentOrderItemPC.itemId,
					technicianId: this.toPaymentOrderItemPC.technicianId,
					subscribeStartTimeString: this.toPaymentOrderItemPC.subscribeStartTime,
					paymentMoney: this.toPaymentOrderItemPC.paymentMoney
				}]
				const params = {
					phoneNumber: this.payInfoData.phoneNumber,
					regionId: uni.getStorageSync('technician').belongAreaId,
					regionName: uni.getStorageSync('technician').belongAreaName,
					storeId: uni.getStorageSync('technician').belongStoreId,
					storeName: uni.getStorageSync('technician').belongStoreName,
					isMember: this.payInfoData.discountType === 'storeCard' ? '2' : '1',
					compartmentId: this.toPaymentOrderItemPC.compartmentId || null,
					compartmentName: this.toPaymentOrderItemPC.compartmentName || null,
					compartmentMoney: this.toPaymentOrderItemPC.compartmentMoney || null,
					isValue: this.payInfoData.discountType === 'storeCard' ? '1' : '2',
					useInterestsType: 0,
					itemCoupon: value || null,
					zyOrderItemList,
					zyOrderProductList
				}
				fetchCouponDiscount(params).then(res => {
					if (res.code !== 200) return
					this.couponDiscount = res.data.discount || 0
					this.totalMoney = res.data.totalAmount || 0
					// this.payInfoData = {
					// 	phoneNumber: res.data.userPhoneNumber,
					// 	userName: item.userName,
					// 	discountsMoney: res.data.discountsMoney,
					// 	memberFlag: res.data.isMember,
					// 	actuallyMoney: res.data.actuaryMoney,
					// 	orderAmount: res.data.paymentMoney,
					// 	valueMoney: res.data.valueCardMoney,
					// }
					// this.payInfoData.discountsMoney=discount
				})
			},
			//确认支付
			clickSubmitPay() {
				console.log(this.toPaymentOrderItemPC, 'this.toPaymentOrderItemPC');
				const params = {
					"id": this.orderParams.id,
					"paymentMoney": this.payInfoData.actuallyMoney,
					"paymentType": this.payInfoData.paymentType,
					"groupPurchaseId": this.orderParams.groupPurchaseId,
					"payCode": ""
				}
				payOrderItemPC(params).then(res => {
					if (res.code == 200) {
						this.payInfoDialog = false
						this.$refs.uToast.show({
							message: '支付成功'
						})
						this.$emit('confirm');
					}
				})
			},

			confirm(item) {
				const params = {
					id: item.id,
				}
				if (this.tabActive === 1) {
					params.status = 2
				}
				if (this.tabActive === 2) {
					params.status = 3
				}
				upClock(params).then((res) => {
					if (res.code === 200) {
						this.$refs.uToast.show({
							message: this.tabActive === 1 ? '上钟成功' : '下钟成功'
						})
						this.shopVisible = false
						this.$emit('confirm');
					}
				})
			},
			detail(item) {
				// uni.navigateTo({
				// 	url: `/subPages/order/orderDetail?id=${item.id}&orderId=${item.orderId}`
				// })
				uni.navigateTo({
					url: `/subPages/order/orderDetiils?id=${item.id}&orderId=${item.orderId}&zyTechnicianEvaluateId=${item.zyTechnicianEvaluateId}`
				})
			},
			startOrder() {
				uni.navigateTo({
					url: '/subPages/order/orderBilling'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btnwh {
		width: 162rpx;
		height: 68rpx;
	}

	.billCard {
		background: #FFFFFF;
		border-radius: 17rpx 17rpx 17rpx 17rpx;
		opacity: 1;
		margin: 37rpx 37rpx 0 37rpx;
		margin-bottom: 20rpx;

		.top {
			padding: 30rpx 30rpx 15rpx 30rpx;
			border-bottom: 1rpx solid #E6E6E6;

			.name {
				font-size: 44rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 15rpx;

				.status {
					width: 58rpx;
					height: 53rpx;
					color: #FFFFFF;
					font-size: 36rpx;
					background-color: #FF0000;
					border-radius: 17rpx;
					margin-right: 15rpx;
				}

				.time {
					font-size: 44rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					line-height: 35rpx;
				}

				.status-time {
					font-size: 32rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					color: #FF0000;
					max-width: 40%;
				}
			}
		}

		.bottom {
			padding: 15rpx 30rpx 30rpx 30rpx;
			border-bottom: 1rpx solid #E6E6E6;

			>view {
				line-height: 52rpx;
			}

			.title {
				font-size: 44rpx;
				font-weight: 500;
				color: #333333;
				line-height: 52rpx;

				.money {
					font-size: 52rpx;
					font-family: DIN, DIN;
					font-weight: bold;
					color: #FE4D4F;
					line-height: 60rpx;
				}

			}

			.flex {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.bottom_btn {
			// 
			height: 173rpx;
			background-color: #FFFFFF;
			justify-content: flex-end;
			align-items: center;
			border-radius: 0 0 17rpx 17rpx;

			.btn {
				width: 205rpx;
				height: 65rpx;
			}
		}
	}

	::v-deep.pay-info-box {
		padding: 30rpx 30rpx;

		.pay-info-item {
			display: flex;
			align-items: center;
			margin: 20rpx 0;


			.item-label {
				width: 170rpx;
			}

			.item-value,
			.item-select {
				flex: 1;

				.select {
					width: 100%;
				}

				.uni-select {
					height: 60rpx !important;
				}
			}
		}

		.pay-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			margin: 40rpx 0 1rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #FFF;
			background-color: #c17e13;
		}

		.is-input-border {
			margin-bottom: 20rpx;
			border: none;
			border-radius: 35rpx;
			text-align: center;
			font-size: 28rpx;
			background-color: #f2f2f2 !important;
		}

		.uni-input-placeholder {
			font-size: 28rpx;
			color: #6e6e6e;
		}

		.item-selected {
			background-color: #fff6e7 !important;
		}
	}
</style>